<!-- 景区选中日期的门票种类及数量 -->
<template>
  <view class="choose_piao">
    <view class="piao_item" v-for="(i, index) in dayPiao" :key="index">
      <view class="top">
        <view class="name"> {{ i.menpiaoName }} </view>
        <view class="price"> ¥{{ i.timeAndNumVos[0].price }} </view>
      </view>
      <view class="center">
        <view class="note">{{ i.menpiaoNote ? i.menpiaoNote : "" }}</view>
        <view class="number">
          <uni-icons type="minus" size="18" color="#D9D9D9" @click="minusNum(index)"></uni-icons>
          <view class="num">{{ i.piaoNumber }}</view>
          <uni-icons type="plus" size="18" color="#0E9589" @click="plusNum(index)"></uni-icons>
        </view>
      </view>
      <view class="bottom">
        <view class="b_item" v-for="(i2, index2) in i.timeAndNumVos" :key="index2">
          <view @click="chooseTime(i2, index2, index)" class="time"
            :class="{ isNoPiao: i2.restNum == 0, isChoose: i2.isActive }">{{
              i2.startTime
            }}-{{ i2.endTime }}
          </view>
          <view class="choose_item" v-if="i2.isActive">
            <uni-icons type="checkmarkempty" size="10" color="#fff" class="choose_icon"></uni-icons>
            <image class="choose_piao_img" :src="config.imgUrl+'choose_piao.png'" />
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  props: {
    // 每天对应的票数
    dayPiao: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      config:getApp().globalData.config,
    };
  },

  onLoad() {
  },

  onShow() { },

  methods: {
    // 选择时间段数据
    chooseTime(item, index2, index) {
      if (item.restNum > 0) {
        console.log(this.dayPiao[index].timeAndNumVos[index2].isActive)
        this.$emit("choose-piao", index2, index);
      }
    },
    // 数量减
    minusNum(index) {
      this.$emit("minus-num", index)
    },
    // 数量加
    plusNum(index) {
      this.$emit("plus-num", index)
    },
  },
};
</script>

<style lang="scss" scoped>
.isNoPiao {
  background: #F0F0F0 !important;
  border: 2rpx solid #F3F3F3 !important;
  color: #999999 !important;
}

.isChoose {
  border-color: #0E9589 !important;
  color: #333333 !important;
}

.choose_piao {
  padding: 0 32rpx;
  // margin-top: 8rpx;
  width: 100%;
  height: 100%;
  margin-bottom: 132rpx;

  .piao_item {
    padding: 32rpx 0;
    border-top: 2rpx solid #F3F3F3;

    .top,
    .center {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 32rpx;
      line-height: 48rpx;
      margin: 10rpx 0;
      color: #333333;

      .name {
        font-weight: 400;
      }

      .price {
        font-size: 36rpx;
        color: #FFAF24;
        font-weight: 500;
      }

      .note {
        font-size: 28rpx;
        color: #999999;
      }

      .number {
        font-size: 36rpx;
        display: flex;
        align-items: center;

        .num {
          margin: 0 10rpx;
        }
      }
    }

    .bottom {
      display: flex;

      .b_item {
        width: 208rpx;
        height: 65rpx;
        line-height: 65rpx;
        text-align: center;
        margin-right: 30rpx;
        margin-bottom: 16rpx;
        font-size: 24rpx;
        position: relative;

        .time {
          border-radius: 10rpx;
          border: 2rpx solid #F3F3F3;
          background: #fff;
          color: #ccc;
        }

        .choose_item {
          width: 41rpx;
          height: 42rpx;
          position: absolute;
          right: 0;
          top: 0;

          .choose_icon {
            position: absolute;
            right: -4rpx;
            top: -21rpx;
            z-index: 11;
          }

          .choose_piao_img {
            width: 41rpx;
            height: 42rpx;
            transform: rotate(270deg);
            position: absolute;
            right: -4rpx;
            top: -2rpx;
            z-index: 0;
          }
        }
      }
    }
  }
}
</style>
